<template>
  <Modal
    v-model:active="offsetActiveModalVueActive"
    transfer
    draggable
    title="偏移"
    :width="480"
    no-footer
  >
    <ConfigProvider :props="providedProps">
      <Form :model="formModel" style="padding: 24px">
        <Row align="middle" justify="start" :gap="[8]">
          <Column :span="24">
            <div class="title">
              <div class="title_color"></div>
              <div class="title_content">方法</div>
            </div>
          </Column>
        </Row>
        <Column :span="18" :offset="6">
          <FormItem label="方法:">
            <Select
              :options="funcSelectTypeOptions"
              v-model:value="formModel.funcSelect"
              @select="funcTypeSelect"
            ></Select>
          </FormItem>
        </Column>
        <Row align="middle" justify="start" :gap="[8]">
          <Column :span="24">
            <div class="title">
              <div class="title_color"></div>
              <div class="title_content">选择器</div>
            </div>
          </Column>
        </Row>
        <Column :span="18" :offset="6">
          <FormItem label="选择:">
            <Select
              :options="selectTypeOptions"
              v-model:value="formModel.select"
              @select="typeSelect"
            ></Select>
          </FormItem>
        </Column>
        <Row align="middle" justify="start" :gap="[8]">
          <Column :span="24">
            <div class="title">
              <div class="title_color"></div>
              <div class="title_content">参数</div>
            </div>
          </Column>
        </Row>
        <Column :span="18" :offset="6">
          <FormItem label="厚度:">
            <Input v-model:value="formModel.thickness" clearable></Input>
          </FormItem>
          <FormItem label="份数:">
            <Input v-model:value="formModel.segment" clearable></Input>
          </FormItem>
        </Column>
        <Row align="middle" justify="start" :gap="[8]">
          <Column :span="24">
            <div class="title">
              <div class="title_color"></div>
              <div class="title_content">创建到</div>
            </div>
          </Column>
        </Row>
        <Column :span="18" :offset="6">
          <FormItem label="组件:">
            <Select
              :options="compSelectTypeOptions"
              v-model:value="formModel.compType"
              @select="compTypeSelect"
            ></Select>
          </FormItem>
        </Column>
      </Form>
      <Row align="middle" justify="end" :gap="[8]">
        <Button type="primary" @click="addOffset">Offset+</Button>
        <Button type="primary" @click="deleteOffset">Offset-</Button>
        <Button type="primary">回退</Button>
      </Row>
    </ConfigProvider>
  </Modal>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import {
  Modal,
  Input,
  Select,
  Divider,
  Form,
  FormItem,
  ConfigProvider,
  Checkbox,
  Row,
  Column,
  selectProps,
  Button,
} from "cax-ui";
import { storeToRefs } from "pinia";
import { useCoreStore, _global } from "@/UI/store";
import { dir } from "console";
let { offsetActiveModalVueActive } = storeToRefs(useCoreStore());
const coreStore = useCoreStore();
const providedProps = {
  default: { clearable: true },
  formItem: { required: false },
};
const formModel = reactive({
  funcSelect: "solid layer",
  select: "2D Element",
  thickness: "10",
  segment: "5",
  compType: 1,
  dir: "positive",
  method: "solid layer",
});
const compSelectTypeOptions = [
  {
    label: "当前组件",
    value: 1,
  },
  {
    label: "新建组件",
    value: 2,
  },
  {
    label: "选择组件",
    value: 3,
  },
];
const funcSelectTypeOptions = [
  {
    label: "多层实体单元",
    value: "solid layer",
  },
  {
    label: "多层壳单元",
    value: "shell layer",
  },
  {
    label: "壳单元偏移",
    value: "shell offset",
  },
  {
    label: "壳单元加厚",
    value: "thicken shell",
  },
  {
    label: "Element Offset",
    value: "element offset",
  },
];
const selectTypeOptions = [
  {
    label: "2D Element",
    value: "2D Element",
  },
  {
    label: "3D Element",
    value: "3D Element",
  },
];
function funcTypeSelect(value: string) {
  formModel.method = value; // 方法选择器
}
function typeSelect(value: number) {
  // coreStore.setEngineState(value);
}
function compTypeSelect() {}
function addOffset() {
  formModel.dir = "positive";
  _global.Engine.mesh.offset(formModel).then((result: any) => {
    console.log("result", result);
    coreStore.setOffsetActiveModal(false);
  });
}
function deleteOffset() {
  formModel.dir = "negative";
  _global.Engine.mesh.offset(formModel).then((result: any) => {
    console.log("result", result);
    coreStore.setOffsetActiveModal(false);
  });
}
function run() {
  _global.Engine.mesh
    .organized(formModel)
    .then((result: any) => {
      coreStore.setBomInfo(result);
    })
    .finally(() => {
      coreStore.setEngineState(0);
    });
  // _global.Engine.edge
  //   .edge_partition(formModel)
  //   .then((result: any) => {
  //     console.log("result", result);
  //     // coreStore.setBomInfo(result);
  //   })
  //   .catch((err) => {})
  //   .finally(() => {
  //     coreStore.setEngineState(0);
  //   });
}
</script>

<style scoped lang="less">
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;

  .title_color {
    width: 4px;
    height: 12px;
    background: #339af0;
    margin-right: 8px;
  }
  .title_content {
    opacity: 1;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0em;
    font-variation-settings: "opsz" auto;
    /* content/主要一级primary */
    /* 样式描述：--vxp-content-color-primary */
    color: #212529;
  }
}
</style>
